<%= include ic/header.html %>
<style>
#nav_my{color:#fff}
body{background:#f7f7f7;}
footer{display:none;}
#backBar{width:auto;height:60px;line-height:60px;font-size:2rem;text-align:left;float:left;cursor:pointer;}
#titleBar{width:auto;height:50px;line-height:50px;float:left;overflow:hidden;}
#titleBar span{float:left;}
#titleBar span~span{padding:0 30px;line-height:60px;}
#titleBar #title{font-size:2.4rem;}
#main{text-align:center;}
#content{width:100%;margin:auto;}
@media only screen and (min-width: 1008px){
  #content{width:80%;min-width:1008px;}
}
#ctrlBar{overflow:hidden;border-bottom:1px solid #ccc;}
#ctrlBar span{height:50px;line-height:50px;float:left;}
#ctrlBar span~span{padding:0 30px 0 0;}
#ctrlBar span.am-fr{padding:0;}
#ctrlBar span .btn{padding:5px 60px 10px;color:#fff;font-size:2rem;background:#000;border-radius:40px;}
#ctrlBar .am-fr a{background:#111;color:#fff;line-height:60px;padding:0 15px;border-radius:15px;display:none;}
#imgList>div{height:300px;overflow:hidden;margin-bottom:4px;cursor:pointer;}
#imgList div.am-u-sm-2{padding:0!important;}
#imgList div.line1.am-u-sm-5{padding-right:0!important;padding-left:4px!important;}
#imgList div.line2.am-u-sm-5{padding-left:0!important;padding-right:4px!important;}
#imgList .selectBar{width:100%;height:50px;background:rgba(0,0,0,0.7);position:absolute;bottom:0;left:0;line-height:50px;font-size:25px;text-align:right;}
#imgList .c .selectBar{color:#fff;}
#imgList .selectBar span{float:right;margin-right:10px;display:none!important;font-weight:100!important;}
#imgList .c .selectBar span.am-icon-check-circle-o,#imgList .d span.am-icon-check-circle{display:inline!important;}
#imgList2>li{overflow:hidden;border:15px solid #f7f7f7;cursor:pointer;position:relative;}
#imgList2>li img{width:auto;height:auto;}
#imgList2 .selectBar{width:100%;height:50px;background:rgba(0,0,0,0.7);position:absolute;bottom:0;left:0;line-height:50px;font-size:25px;text-align:right;}
#imgList2 .c .selectBar{color:#fff;}
#imgList2 .selectBar span{float:right;margin-right:10px;display:none!important;font-weight:100!important;}
#imgList2 .c .selectBar span.am-icon-check-circle-o,#imgList2 .d span.am-icon-check-circle{display:inline!important;}
#loading{display:none;}

#my-prompt{padding:15px 0;background:#151515;border-radius:15px;}
.am-modal-bd{padding:0;border-bottom:none;background:#151515;}
.am-modal-bd label{width:100%;padding:10px;text-align:left;margin:5px;font-weight:400;color:#ddd;font-size:1.6rem;}
.am-modal-prompt-input{width:100%;border:none;background:#292929;padding:10px;}
.am-modal-bd+.am-modal-bd{margin-top:0;}
.am-modal-footer{background:#151515;}
.am-modal-footer .am-btn{width:30%;border:1px solid #ddd;margin:20px 15px 5px;border-radius:10px;color:#ddd;}
</style>
<div id="main" class="am-cf">
<div id="content">
  <div id="backBar" onclick="gotoUrl('/my/trip')">
    <i class="am-icon-caret-left"></i> BACK
  </div>
  <div class="am-cf"></div>
  <div id="titleBar">
    <span id="title">Select photos to create a trip</span>
  </div>
  <div class="am-cf"></div>
  <div id="ctrlBar">
    <span><a href="javascript:create()" class="btn">Create</a></span>
    <div class="am-cf"></div>
    <span><a href="javascript:viewAll()">Veiw all</a></span>
    <span><a href="javascript:viewAlbums()">Veiw Albums</a></span>
  </div>
  <div class="am-cf"></div>
  <div id="imgList" class="am-g am-cf"></div>
  <ul id="imgList2" class="am-avg-sm-2 am-avg-md-3 am-avg-lg-5 am-cf"></ul>
  <div id="loading">Loading...</div>
</div>
</div>
<div class="am-modal am-modal-prompt" tabindex="-1" id="my-prompt">
  <div class="am-modal-dialog">
    <div class="am-modal-bd">
      <label>Trip's title</label>
      <input type="text" class="am-modal-prompt-input">
    </div>
    <div class="am-modal-bd">
      <label>Description</label>
      <input type="text" class="am-modal-prompt-input">
    </div>
    <div class="am-modal-bd">
      <label>Conclusion</label>
      <input type="text" class="am-modal-prompt-input">
    </div>
    <div class="am-modal-footer">
      <span class="am-btn" data-am-modal-cancel>Cancel</span>
      <span class="am-btn" data-am-modal-confirm>Done</span>
    </div>
  </div>
</div>
<%= include ic/footer.html %>
<script type="text/javascript" src="/js/jquery.endless-scroll.js"></script>
<script type="text/javascript">
var page=0;totalpage=1;type="all";
var $loading = $("#my-modal-loading");
$(function() {
  fixImg();
  $(window).resize(function(){
    fixImg();
  });
  $(document).endlessScroll({
      inflowPixels:0,
      fireDelay: 1000,
      ceaseFireOnEmpty:false,
      fireOnce: false,
      callback: function(){
        //console.log(isLoading);
        if(page<totalpage && !isLoading){
          //console.log(2);
          page++;
          if(type=="all"){
            getImages();
          }else{
            getAlbums();
          }
        }
      }
  });
  viewAll();
});

function fixImg(){
  $("#imgList>div").height($("#imgList div").first().width()*4/3);
  $("#imgList>div").map(function(){
    var w=$(this).width();
    var h=$(this).height();

    if($(this).hasClass("am-u-sm-5")){
      if($(this).children("img").width()/$(this).children("img").height()>w/h){
        $(this).children("img").height(h);
        $(this).children("img").css("width","auto");
      }else{
        $(this).children("img").width(w);
        $(this).children("img").css("height","auto");
      }
      $(this).children(".selectBar").width($(this).children("img").width());
      if($(this).hasClass("line1")){
        $(this).children(".selectBar").css("left","4px");
      }
    }else{
      $(this).children("img").width(w);
      $(this).children("img").css("height","auto");
      if($(this).children("img").width()/$(this).children("img").height()>w/h){
        $(this).children("img").height(h);
        $(this).children("img").css("width","auto");
      }else{
        $(this).children("img").width(w);
        $(this).children("img").css("height","auto");
      }
    }
  });
}

function fixImg2(){
  $("#imgList2>li").height($("#imgList2 div").first().width());
  $("#imgList2>li").map(function(){
    var w=$(this).innerWidth();
    if($(this).children("img").width()/$(this).children("img").height()>1){
      $(this).children("img").height(w);
      $(this).children("img").css("width","auto");
    }else{
      $(this).children("img").width(w);
      $(this).children("img").css("height","auto");
    }
  });
}

function selectImg(obj){
  if($(obj).hasClass("d")){
    $(obj).addClass("c");
    $(obj).removeClass("d");
  }else{
    $(obj).addClass("d");
    $(obj).removeClass("c");
  }
}

function selectImg2(obj){
  $("#imgList2>li.c").addClass("d");
  $("#imgList2>li.c").removeClass("c");
  $(obj).addClass("c");
  $(obj).removeClass("d");
}

function getIds(){
  var id="#imgList";
  if(type!="all")id="#imgList2";
  var ids=$(id+" .c").map(function() {
    return $(this).data("id");
  }).get();
  return ids;
}

function getImages(){
  $("#loading").show();
  $.post("/my/photostream?page="+page, {
    "ajax"		: true,
  },function(data){
    //console.dir(data);
    $("#loading").hide();
    if(typeof(data)=="object" && typeof(data.error)=="undefined"){
      var totalpage = data.pager.lastPage;
      var images = data.results;
      //console.log(images[0]);
      var n      = $("#imgList>div").size();
      for(var i=0;i<images.length;i++){
        n++;
        var uc="am-u-sm-5";
        var lc="line2";
        if(n%6==1 || n%6==0)uc="am-u-sm-2";
        if(Math.ceil(n/3)%2==1)lc="line1";
        var html='<div class="'+uc+' '+lc
            +' d" onclick="selectImg(this)"  data-id="'
            + images[i].objectId+'" >'
            + '<img src="/p?id='+images[i].objectId+'&w=500" alt="'
            + images[i].name+'" onload="fixImg()" title="'+images[i].name+'">'
            + '<div class="selectBar">'
            + '<span class="am-icon-check-circle"></span><span class="am-icon-check-circle-o"></span></div></div>';
        $("#imgList").append(html);
      }
      isLoading=false;
    }else{
      console.error(data.error);
    }
  }, "json");
}

function getAlbums(){
  $("#loading").show();
  $.post("/my/album?page="+page, {
    "ajax"		: true,
  },function(data){
    //console.dir(data);
    $("#loading").hide();
    if(typeof(data)=="object" && typeof(data.error)=="undefined"){
      var totalpage = data.pager.lastPage;
      var images    = data.results;
      var classname = "c";
      for(var i=0;i<images.length;i++){
        if(i>0)classname = "d";
        var html='<li class="'
            +classname+'" onclick="selectImg2(this)"  data-id="'
            + images[i].objectId+'" >'
            + '<img src="/p?id='+images[i].cover.objectId+'&w=500" alt="'
            + images[i].title+'" onload="fixImg2()" title="'+images[i].title+'">'
            + '<div class="selectBar">'
            + '<span class="am-icon-check-circle"></span><span class="am-icon-check-circle-o"></span></div></li>';
        $("#imgList2").append(html);
      }
    }else{
      console.error(data.error);
    }
  }, "json");
}

function viewAll(){
  page=0;totalpage=1;
  $("#imgList").html("");
  $("#imgList2").hide();
  $("#imgList").show();
  type="all";
  getImages();
}

function viewAlbums(){
  page=0;totalpage=1;
  $("#imgList2").html("");
  $("#imgList").hide();
  $("#imgList2").show();
  type="album";
  getAlbums();
}

function create(){
  var ids=getIds();
  if(ids.length>0){
    $('#my-prompt').modal({
        relatedTarget: this,
        onConfirm: function(e){
          var title       = $.trim(e.data[0]);
          var detail      = $.trim(e.data[1]);
          var conclusion  = $.trim(e.data[2]);
          if(title.length==0 || conclusion.length==0){
            mAlert({title:"Tips",text:"Trip's title and conclusion are required!",function(){$('#my-prompt').modal('open');}});
          }else{
            $('#my-prompt').modal('close');
            $loading.modal('open');
            $.post("/my/trip/create", {
              "ajax"		: true,
              type	    : type,
              title     : title,
              detail    : detail,
              conclusion:conclusion,
              ids       : ids
            },function(data){
              $loading.modal('close');
              if(typeof(data)=="object" && typeof(data.error)=="undefined"){
                gotoUrl("/trip/detail?id="+data.trip);
              }else{
        				//console.dir(data);
        				mAlert({
        					title:"Error",
        					text:data.error,
        					onConfirm:function(e) {}
        				});
        			}

            }, "json");
          }
        },
        onCancel: function(e) {$('#my-prompt').modal('close');}
    });
  }else{
    mAlert({title:"Tips",text:"Please select some photos or albums!"})
  }
}
</script>
